<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" +request.getServerPort() + path + "/";
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="<%=basePath %>/js/My97DatePicker/WdatePicker.js"></script>
<link rel="stylesheet" href="<%=basePath %>/css/bootstrap.min.css">
<script type="text/javascript" src="<%=basePath %>/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/laypage/laypage.js"></script>
<style type="text/css">
#div1{
margin: 20px;
}
img{
width: 100%;
margin-bottom: 10px;
}
#button{
float: right;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="div1">人事管理 》 请假申请</div>
<!-- Unnamed (水平线) -->
      <img id="u6_line" class="img " src="<%=basePath %>/img/u199_line.png"/>
<button type="button" class="btn btn-success" id="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">新增</button>


<table class="table" id="table">
<thead>
<tr>
<th>用章人</th>
<th>用章类型</th>
<th>用章日期</th>
<th>用章事由</th>
<th>状态</th>
<th>操作</th>
</tr>
 </thead>
</table>
<div id="laypage"></div>

<!-- 新增模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		<form action="<%=basePath %>/addOrders" method="post">
			<div class="modal-header">
			
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				</button>
				<h4 class="modal-title" id="myModalLabel">
					新增用章信息
				</h4>
				
				<div class="form-group"><span> 用章类型：</span>
					<select name="O_style" class="form-control" id="grade" >
						<option value="请选择用章类型" selected="selected" value="">请选择您的用章类型</option>
						<option value="公司用章" class="defaultOption">公司用章</option>
						<option value="财务用章" class="defaultOption">财务用章</option>
						<option value="人事用章" class="defaultOption">人事用章</option>
						<option value="病假" class="defaultOption">病假</option>
					</select>
					<span>用章事由:</span>
					<textarea cols="80" rows="6" name="O_reason" id="O_reason" placeholder="请填写您的用章事由"></textarea><br>
					<p><span> 用章时间:</span><input type="text" class="form-control" placeholder="请填写选择日期时间" id="inputError"  name="O_time" onClick="WdatePicker({skin:'blue',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})" > </p>
					<div class="form-group">
					下一步审核：<select name="O_auditor" class="form-control" id="roleid" >
					  <option value="请选择审核人" selected="selected" value="" >请选择审核人</option>
					</select>
				</div>
				</div>
				
			</div>
		
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					关闭
				</button>
				<input type="submit" class="btn btn-primary"  >
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- <script>
   $(function () { $('#myModal').modal('hide')});
</script> -->
<!--  <script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('是否确定提交');})
   });
</script> --> 

<!-- 修改模态框（Modal） -->
<div class="modal fade" id="myModalModity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
			
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
				</button>
				<h4 class="modal-title" id="myModalLabel">
					修改用章信息
				</h4>
				<input type="hidden" id="cid" value=""/>
				<div class="form-group"><span> 用章类型：</span>
					<select name="O_style" class="form-control" id="style" >
						<option value="请选择用章类型" selected="selected" value="">请选择您的用章类型</option>
						<option value="公司用章" class="defaultOption">公司用章</option>
						<option value="财务用章" class="defaultOption">财务用章</option>
						<option value="人事用章" class="defaultOption">人事用章</option>
						<option value="病假" class="defaultOption">病假</option>
					</select>
					<span>用章事由:</span>
					<textarea cols="80" rows="6" name="O_reason" id="reasons" placeholder="请填写您的用章事由" ></textarea><br>
					<p><span> 用章时间:</span><input type="text" class="form-control" placeholder="请填写选择日期时间" id="inputErrors"  name="O_time" onClick="WdatePicker({skin:'blue',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'2008-03-08 11:30:00',maxDate:'2100-03-10 20:59:30'})" > </p>
					 <div class="form-group">
					下一步审核：<select name="O_auditor" class="form-control"  id="roleids" >
					  <option value="请选择审核人" selected="selected" value="" >请选择审核人</option>
					</select>
				</div> 
				</div>
				
			</div>
		
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					关闭
				</button>
				
			  <button type="button" class="btn btn-default" id="update01" data-dismiss="modal" onclick="updateConference()">
					确定
				</button>	
				
			</div>
			
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- 删除模态框（Modal） -->
<div class="modal fade" id="myModaldelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
		<form action="">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					请假申请
				</h4>
			</div>
			<div class="modal-body">
				确定删除本条记录
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消
				</button>
				<input type="submit" class="btn btn-primary" value="确定">
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<script type="text/javascript">
/* 显示数据及分页  */
 function showOrder() {
	 showOrder(1);
}
 $(document).ready( function(){
	 showOrder(1);
 })
		function showOrder(currentPage) {
			
			
			$.ajax({
				url:'<%=basePath %>/showOrderList',
				type:'post',
				data:{'currentPage':currentPage},
				dataType:'json',
				success:function(res){
					console.log(res);
					$("#table").html("");
					  $("#table").append("<tr><td>用章人</td><td>用章类型</td><td>用章时间</td><td>用章事由</td><td>状态</td><td>操作</td></tr>");
					$.each(res.order, function(inx, ele){
						$("#table").append(
								"<tbody><tr>"+"<td>"+ele.o_user+"</td>"+"<td>"+ele.o_style+"</td>"+"<td>"+ele.o_time+"</td>"+"<td>"
								+ele.o_reason+"</td>"+"<td>"+ele.o_state+"</td><td>"+
								"<button type='button' class='btn btn-success' id='modifysal' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModalModity' onclick='Values("+ele.o_id+")'>修改</button>"+
								"&nbsp;&nbsp;"+"<button type='button' class='btn btn-success' name='O_style' id='myDel' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModaldelete' onclick='getdelete("+ele.o_id+")'>删除</button>"+"</td></tr></tbody>");
	 
					})
					laypage({
					    cont: $("#laypage"),
					    pages:res.count,  //假设我们获取到的是18（后端计算完总页数后将总页数值传过来，放在这里即可（类似{$totalpage}））.
					    groups:5, //显示几页码 
					    skip: true, //是否开启跳页
					    skin: '#AF0000',
					    curr:currentPage,  //假设我们获取到的是18（后端计算完总页数后将总页数值传过来，放在这里即可（类似{$totalpage}））.
					    groups:3, //显示几页码currentPage,
					
					    jump: function(obj, first){ //触发分页后的回调
					        if(!first){ 	//一定要加此判断，否则初始时会无限刷新      
					        	showOrder(obj.curr); 
					        }
					    }
					});  
				}
			})
		}
	
		//修改按钮绑定模态框
	/*  $("#myModalModity").modal('hide');   */
	function Values(ID){
		$("#cid").val(ID)
		
	}
	//修改
	function updateConference(){
	 	var O_id=$("#cid").val(); 
		var O_style=$("#style").val()
		var O_reasons=$("#reasons").val();
		var O_time=$("#inputErrors").val();
		var roleids=$("#roleids").val();
	
			   $('#myModalModity').modal('hide');       
		$.ajax({
			url:'../modityOrder',
			type:'post',
			data:{O_id:O_id,O_style:O_style,O_reason:O_reasons,O_time:O_time,O_auditor:roleids},
			dataType:'json',
			success:function(res){
				
				alert("修改成功!");
				showOrder(1);

			}
		})
	}

		//删除按钮绑定模态框
		$("#myModaldelete").modal("hide");
		function getdelete(id) {
			$("#myDel").val(id);

			$.ajax({
				url:'../deleteOrder',
				type:'post',
				data:{'O_id':id},
				dataType:'json',
				success:function(res){
					showOrder(1);
				}
			})
		
		}
		
		/* 选择审批人 */
$(document).ready(
 function showSectionMgr(){
	var uid=${obj.uid}; 
	
	$.ajax({
		url:'../sectionList',
		type:'post',
		data:{uid:uid},
		dataType:'json',
		success:function(res){
			$.each(res.section, function(inx, ele) {
				$("#roleid,#roleids").append(
						"<option value=" + (ele.umgr) + ">"
								+ ele.boss_name + "</option>");
			})
		
		}
	})
})

</script>
</body>
</html>